<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/base.css" rel="stylesheet"/>
    <script src="js/jquery1.42.min.js" type="text/javascript"></script>
    <script src="js/jquery.SuperSlide.2.1.3.js" type="text/javascript"></script>
    <script src="js/flexible.min.js" type="text/javascript"></script>
    <title>分类</title>
</head>
<body style="background-color: rgb(242,242,242);">
    <div class="classification">
        <div class="tab_title">
            <ul>
                <li class="on">电商卡</li>
                <li>电商卡</li>
                <li>电商卡</li>
                <li>电商卡</li>
                <li>电商卡</li>
                <li>电商卡</li>
                <li>电商卡</li>
                <li>电商卡</li>
                <li>电商卡</li>
            </ul>
        </div>
        <div class="commodityList">
            <div>
                <ul class="list">
                    <li>
                        <a>
                            <div class="commodityList_left">
                                <img src="img/hy.png">
                                <div>
                                    <p>苏宁易购</p>
                                    <p class="discount">4折</p>
                                </div>
                            </div>
                            <div class="commodityList_right"><img src="img/hy24.png"></div>
                        </a>
                    </li>
                    <li>
                        <a>
                            <div class="commodityList_left">
                                <img src="img/hy.png">
                                <div>
                                    <p>苏宁易购</p>
                                    <p class="discount">4折</p>
                                </div>
                            </div>
                            <div class="commodityList_right"><img src="img/hy24.png"></div>
                        </a>
                    </li>
                    <li>
                        <a>
                            <div class="commodityList_left">
                                <img src="img/hy.png">
                                <div>
                                    <p>苏宁易购</p>
                                    <p class="discount">4折</p>
                                </div>
                            </div>
                            <div class="commodityList_right"><img src="img/hy24.png"></div>
                        </a>
                    </li>
                    <li>
                        <a>
                            <div class="commodityList_left">
                                <img src="img/hy.png">
                                <div>
                                    <p>苏宁易购</p>
                                    <p class="discount">4折</p>
                                </div>
                            </div>
                            <div class="commodityList_right"><img src="img/hy24.png"></div>
                        </a>
                    </li>
                </ul>
            </div>
            <div>
                <ul class="list">
                    <li>
                        <a>
                            <div class="commodityList_left">
                                <img src="img/hy.png">
                                <div>
                                    <p>苏宁易购</p>
                                    <p class="discount">4折</p>
                                </div>
                            </div>
                            <div class="commodityList_right"><img src="img/hy24.png"></div>
                        </a>
                    </li>
                    <li>
                        <a>
                            <div class="commodityList_left">
                                <img src="img/hy.png">
                                <div>
                                    <p>苏宁易购1</p>
                                    <p class="discount">4折</p>
                                </div>
                            </div>
                            <div class="commodityList_right"><img src="img/hy24.png"></div>
                        </a>
                    </li>
                    <li>
                        <a>
                            <div class="commodityList_left">
                                <img src="img/hy.png">
                                <div>
                                    <p>苏宁易购</p>
                                    <p class="discount">4折</p>
                                </div>
                            </div>
                            <div class="commodityList_right"><img src="img/hy24.png"></div>
                        </a>
                    </li>
                    <li>
                        <a>
                            <div class="commodityList_left">
                                <img src="img/hy.png">
                                <div>
                                    <p>苏宁易购</p>
                                    <p class="discount">4折</p>
                                </div>
                            </div>
                            <div class="commodityList_right"><img src="img/hy24.png"></div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="fount">
        <div>
            <a href="index.html">
                <img src="img/home1.png">
                <div>首页</div>
            </a>
        </div>
        <div>
            <a href="classification.html">
                <img src="img/hy121.png">
                <div class="active">分类</div>
            </a>
        </div>
        <div>
            <a href="sell_crad.html">
                <img src="img/hy11.png">
                <div>买卡</div>
            </a>
        </div>
        <div>
            <a href="grzx.html">
                <img src="img/my.png">
                <div>我的</div>
            </a>
        </div>

    </div>
</body>
<script>
    //选项卡
    $('.commodityList>div').eq(0).show();
    $('.tab_title li').click(function(){
        var index = $(this).index()
        console.log(index)
        $(this).addClass('on')
        $(this).siblings().removeClass('on')
        $('.commodityList>div').eq(index).show();
        $('.commodityList>div').eq(index).siblings().hide();
    })
    //给ul 赋宽
    var limun = $('.tab_title li').length
    console.log(limun)
    var uldemo = $('.tab_title ul')
    uldemo.css('width', limun * 2.1 +'rem')
    console.log(uldemo)
</script>
</html>